<script lang="ts" setup>
import { useTagStore } from '@/stores/tag'
// import 'animate.css'
const tagStore = useTagStore();

</script>

<template>
  <RouterView v-slot="{ Component }">
    <!-- <transition> -->
      <keep-alive :max="tagStore.maxTagView" :include="tagStore.keepaliveCache">
        <component :is="Component" :key="$route.fullPath" />
      </keep-alive>
    <!-- </transition> -->
  </RouterView>
</template>

<style lang="less" scoped>
@duration: 0.2s;
// .bounce-enter-active {
//   animation: zoomIn @duration;
//   animation-delay: @duration;
// }
// .bounce-leave-active {
//   animation: zoomOut @duration;
// }

@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }
}

@keyframes zoomOut {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  to {
    opacity: 0;
  }
}
</style>